<script setup>
import {goHome, getRouteParams, goWaste, goBack} from "../../tools/go";
import { getOrderById } from "../../api/waste/order"
import UniSection from "../../uni_modules/uni-section/components/uni-section/uni-section.vue";
import {baseUrl} from "../../api/http";
import {ref} from "vue"

const list = [
  {id:1,name:'返回首页',img:"./static/img/indeximg/kjfs/xiaoqubg.png"},
  {id:2,name:'打赏回收员',img:"./static/img/indeximg/kjfs/xiaoqubg.png"},
]

const order = ref({
  id: 1,
  orderNum: "T1740902268536",
  staffId: null,
  staff: null,
  addr: 1,
  userAddrVo: {
    id: 1,
    userId: 23,
    userNick: "bbm",
    contact: "13213214",
    addr: "广西",
    remark: "学校"
  },
  orderName: "无敌大塑a料订单",
  orderStatus: 0,
  wasteId: 16,
  wasteName: "无敌大塑a料",
  wasteClassName: "塑料",
  orderPrice: 20000.0,
  createTime: "1740902268540",
  updateTime: "1740902268540",
  clientUrl: null
})

const init = () => {
  getOrderById(getRouteParams("id")).then(res => {
    console.log(res)
    order.value = res.data
  })
}

init()

</script>

<template>
<view class="back">
  <view class="waste-detail">
    <!-- 页面标题 -->
    <view class="title-bar">
      <v-icon @click="goBack" class="back-icon" icon="mdi-chevron-left"></v-icon>
      <h3>下单详情</h3>
    </view>

    <view class="info-card weight-info"  v-if="order.clientUrl !== null">
      <image :src="baseUrl + order.clientUrl" />
    </view>

    <!-- 基础信息 -->
    <view class="info-card weight-info">
      <h4>订单名称</h4>
      <text>{{ order.orderName }}</text>
    </view>



    <!-- 重量信息 -->
    <view class="info-card weight-info">
      <h4>预估价格</h4>
      <text>{{ order.orderPrice }}人民币</text>
    </view>
    
    <!-- 时间状态 -->
    <view class="time-status">
      <text>等待回收员确认上门时间</text>
    </view>
    
    <!-- 等待状态提示 -->
    <view class="status-indicator" v-if="order.staff">
      <div class="status-item">
        <v-icon icon="mdi-lightbulb-on-outline" class="status-icon"></v-icon>
        <text>{{order.staff['staffName']}}</text>
      </div>
      <div class="status-item">
        <v-icon icon="mdi-clock-time-four-outline" class="status-icon"></v-icon>
        <text>等待中...</text>
      </div>
    </view>
    
    <!-- 回收员信息 -->
    <view class="info-card recycler-info" v-if="order.staff">
      <view>回收员</view>
      <view class="recycler-profile">
        <h4>{{order.staff.staffName}}</h4>
        <text>{{order.staff['staffContact']}}</text>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="info-card order-details">
      <view class="detail-item">
        <h4>订单号</h4>
        <text>{{order.orderNum}}</text>
      </view>
      <view class="detail-item">
        <h4>下单人</h4>
        <text>{{order.userAddrVo.userNick}}</text>
      </view>
      <view class="detail-item s">
        <h4>地址</h4>
        <text>{{order.userAddrVo.addr}}</text>
      </view>
      <view class="detail-item s">
        <h4>联系电话</h4>
        <text>{{order.userAddrVo.contact}}</text>
      </view>
      <view class="detail-item s">
        <h4>下单时间</h4>
        <text>{{order.createTime}}</text>
      </view>
    </view>
    
    <!-- 注意事项 -->
    <view class="notice-card">
      <h4>注意事项:</h4>
      <text>
        1. 请确保物品为可回收物，否则将无法回收。
      </text>
      <text>
        2. 请保持手机畅通，回收员可能会联系您确认详情。
      </text>
    </view>
    
    <!-- 底部空间 -->
    <view class="bottom-space"></view>
    
    <!-- 底部操作栏 -->
<!--    <view class="footer-actions">-->
<!--      <ul>-->
<!--        <li v-for="item in list" :key="item.id" @click="item.id === 1 ? goHome() : null">-->
<!--          <img :src="item.img" alt="">-->
<!--          <span>{{ item.name }}</span>-->
<!--        </li>-->
<!--      </ul>-->
<!--    </view>-->
  </view>
</view>
</template>

<style scoped lang="scss">
@use "../../static/css/main";

.back {
  @include main.useTheme() {
    background-color: main.getVal("two_lv_bg_color");
    
    .waste-detail {
      background: main.getVal("two_lv_bg_color");
      min-height: 100vh;
      padding-bottom: 80px;
      
      /* 页面标题栏 */
      .title-bar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 56px;
        background: main.getVal("primary_bg_color");
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        
        h3 {
          color: main.getVal("primary_text_color");
          font-size: 18px;
          font-weight: 500;
        }
        
        .back-icon {
          position: absolute;
          left: 16px;
          font-size: 24px;
          color: main.getVal("primary_text_color");
          cursor: pointer;
          
          &:active {
            opacity: 0.7;
          }
        }
      }
      
      /* 通用卡片样式 */
      .status-card, .info-card, .notice-card {
        width: 92%;
        margin: 12px auto;
        border-radius: 12px;
        background: main.getVal("primary_bg_color");
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }
      
      /* 时间状态特殊样式 */
      .time-status {
        width: 92%;
        margin: 12px auto;
        border-radius: 12px;
        background: main.getVal("pri_color");
        padding: 16px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      }
      
      /* 订单状态 */
      .status-card {
        h2 {
          color: main.getVal("pri_color");
          font-size: 20px;
          font-weight: 600;
        }
      }
      
      /* 重量信息 */
      .weight-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        h4 {
          color: main.getVal("primary_text_color");
          font-weight: 500;
          font-size: 16px;
        }
        
        text {
          color: main.getVal("one_lv_text_color");
          font-size: 15px;
        }
      }
      
      /* 时间状态 */
      .time-status {
        color: main.getVal("primary_bg_color");
        font-weight: 500;
        font-size: 16px;
        text-align: center;
        
        text {
          display: block;
        }
      }
      
      /* 等待状态提示 */
      .status-indicator {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 92%;
        height: 70px;
        margin: 12px auto;
        padding: 0 16px;
        background: main.getVal("primary_bg_color");
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        
        .status-item {
          display: flex;
          align-items: center;
          
          .status-icon {
            color: main.getVal("pri_color");
            margin-right: 8px;
            font-size: 22px;
          }
          
          text {
            color: main.getVal("one_lv_text_color");
            font-size: 15px;
          }
        }
      }
      
      /* 回收员信息 */
      .recycler-info {
        .recycler-profile {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          
          h4 {
            color: main.getVal("primary_text_color");
            font-weight: 500;
            font-size: 17px;
            margin-right: 12px;
          }
          
          text {
            color: main.getVal("one_lv_text_color");
            font-size: 15px;
          }
        }
        
        .address-info {
          display: flex;
          align-items: flex-start;
          
          .location-icon {
            color: main.getVal("pri_color");
            margin-right: 8px;
            font-size: 20px;
            margin-top: 2px;
          }
          
          text {
            flex: 1;
            color: main.getVal("one_lv_text_color");
            font-size: 15px;
            line-height: 1.4;
            word-break: break-word;
          }
        }
      }
      
      /* 订单信息 */
      .order-details {

        .detail-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }
          
          h4 {
            color: main.getVal("primary_text_color");
            font-weight: 500;
            font-size: 16px;
          }
          
          text {
            color: main.getVal("one_lv_text_color");
            font-size: 15px;
          }
        }
        .s{
          h4 {
            color: main.getVal("primary_text_color");
            font-weight: 500;
            font-size: 3vw;
          }
          text {
            color: main.getVal("one_lv_text_color");
            font-size: 3vw;
          }
        }
      }
      
      /* 注意事项 */
      .notice-card {
        h4 {
          color: main.getVal("primary_text_color");
          font-weight: 500;
          font-size: 16px;
          margin-bottom: 12px;
        }
        
        text {
          display: block;
          width: 100%;
          margin-bottom: 10px;
          color: main.getVal("one_lv_text_color");
          font-size: 14px;
          line-height: 1.5;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      
      /* 底部空间 */
      .bottom-space {
        height: 80px;
      }
      
      /* 底部操作栏 */
      .footer-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: main.getVal("primary_bg_color");
        padding: 12px 16px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        
        ul {
          display: flex;
          justify-content: space-around;
          
          li {
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: transform 0.2s ease;
            
            &:active {
              transform: scale(0.95);
            }
            
            img {
              width: 44px;
              height: 44px;
              border-radius: 50%;
              object-fit: cover;
              margin-bottom: 6px;
            }
            
            span {
              font-size: 14px;
              color: main.getVal("one_lv_text_color");
            }
          }
        }
      }
      
      /* 响应式调整 */
      @media screen and (max-width: 360px) {
        .status-indicator {
          flex-direction: column;
          height: auto;
          padding: 12px;
          
          .status-item {
            margin-bottom: 8px;
            
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
        
        .info-card, .notice-card {
          padding: 12px;
        }
      }
    }
  }
}
</style>